<?php
/**
 * Created by PhpStorm.
 * User: user
 * Date: 2016/3/30
 * Time: 19:22
 */

use front\assets\AppAsset;
use yii\helpers\Url;

$base = AppAsset::register($this);
$baseUrl = $base->baseUrl;

$this->title = "填写申请人信息";

?>

<body class="u-bg1">

<div class="m-ref">

    <dl class="cnt1">
        <dt>商品返回方式</dt>
        <dd id="J_sltBtn">
            <a href="<?=Url::to(['address/self-address', 'order_id' => $fromInfo['order_id'], 'product_id' => $fromInfo['product_id'], 'id' => $fromInfo['id']])?>&refund_type=1&from=refund" <?= isset($fromInfo['refund_type']) && $fromInfo['refund_type'] == 1? 'class="z-on"' : ""?>>送货到线下门店</a>
            <a href="<?=Url::to(['address/self-address', 'order_id' => $fromInfo['order_id'], 'product_id' => $fromInfo['product_id'], 'id' => $fromInfo['id']])?>&refund_type=2&from=refund" <?= isset($fromInfo['refund_type']) && $fromInfo['refund_type'] == 2? 'class="z-on"' : ""?>>快递到线下门店</a>
            <span id="shop_info" shop_id="<?= $shop['shop_id']?>">
                <?php if ($shop['shop_id'] == 0) {?>
                    请将商品送到线下指定门店
                <?php }else {?>
                    门店名称：<?= $shop['shop_name']?><br/>门店电话：<?= $shop['mobile']?> <br/> 门店地址：<?= $shop['address']?>
                <?php }?>
            </span>
        </dd>
    </dl>

    <dl class="cnt2">
        <dt>确认收货地址</dt>
        <dd><label>收货人</label><input type="text" id="name" value="<?= $address['name']?>" /></dd>
        <dd><label>手机号码</label><input type="text" id="mobile" value="<?= $address['mobile']?>" /></dd>
    </dl>

    <input type="hidden" id="J_valCity" value="<?= $address['district_char']?>" />
    <ul class="cnt3">
        <li><label>收货地址</label><span id="J_forCity"><?= $address['merger']?></span></li>
    </ul>

    <dl class="cnt2">

        <dd><label>详细地址</label><input type="text" id="address" value="<?= $address['address']?>" /></dd>
    </dl>

    <a href="javascript:submit();" class="subi">提交</a>

</div>

<div class="mask" id="J_mask"></div>

<div class="m-region" id="J_sltCity">
    <h6 class="f-cb"><span>选择省/市/区</span><a href="javascript:void(0);" id="j-sure-region">完成</a></h6>
    <h5><span>省</span><span>市</span><span>区</span></h5>
    <h4></h4>
    <div><ul class="j-prov"></ul></div>
    <div><ul class="j-city"></ul></div>
    <div><ul class="j-area"></ul></div>
</div>

<script>

    /* ----------------------------- */

    // 预定义变量
    var eleFst, eleScd, eleThd;
    var jFst = '.j-prov', jScd = '.j-city', jThd = '.j-area';
    var cfg = [40, 2]; // 此处修改需要修改对应的CSS值
    var init = {0:['31', '上海市'], 1:['3101', '上海市'], 2:['310101', '黄浦区']};

    // 匿名选择器
    var GC = function(c){ return document.querySelector(c); };
    var GI = function(i){ return document.getElementById(i); };

    // 选择地区弹窗开启 & 确定地区关闭弹窗
    GI('J_forCity').addEventListener('touchend', showRegion, false);
    GI('j-sure-region').addEventListener('touchend', closeRegion, false);

    // [函数] 选择地区弹窗开启
    function showRegion(){

        // 省级 & 市级 & 县级HTML
        GC(jFst).innerHTML = obRegion.createOptions(cfg[1], obRegion.prov);
        GC(jScd).innerHTML = obRegion.createOptions(cfg[1], obRegion.retSubDataById(init[0][0]));
        GC(jThd).innerHTML = obRegion.createOptions(cfg[1], obRegion.retSubDataById(init[1][0]));

        // 开启 遮罩 & 选择的弹窗
        GI('J_sltCity').style.cssText = obRegion.kernel() + 'transition:all .15s linear;'+ obRegion.kernel() +'transform:translateY(-290px);';
        GI('J_mask').style.display = 'block';

        // 省级 滑动
        eleFst = new zTransform(jFst, { spacing : cfg[0], step : cfg[1], then : obRegion.retIndex(init[0][0]),
            complete : function (i){

                // 级联 市级
                var el = document.querySelector(jFst + ' > li:nth-child('+ (i + 1) +')');
                var pid = el.getAttribute('data-id'), ptxt = el.textContent;
                var psub = obRegion.retSubDataById(pid);
                GC(jScd).innerHTML = obRegion.createOptions(cfg[1], psub);
                eleScd.reFresh();

                // 级联 县级[存在则显示，反之隐藏]
                var carr = obRegion.retFirst(psub);
                var cid = carr[0], ctxt = carr[1];
                var csub = obRegion.retSubDataById(cid);
                var sel = document.querySelector(jThd);
                if(csub){
                    sel.innerHTML = obRegion.createOptions(cfg[1], csub);
                    sel.style.display = 'block';
                    eleThd.reFresh();
                    var aarr = obRegion.retFirst(csub);
                    var aid = aarr[0], atxt = aarr[1];
                }else{
                    sel.style.display = 'none';
                    var aid = '', atxt = '';
                }

                init = {0:[pid, ptxt], 1:[cid, ctxt], 2:[aid, atxt]};
            }
        });

        // 市级 滑动
        eleScd = new zTransform(jScd, { spacing : cfg[0], step : cfg[1], then : obRegion.retIndex(init[1][0]),
            complete : function(i){

                // 级联 县级[存在则显示，反之隐藏]
                var el = document.querySelector(jScd + ' > li:nth-child('+ (i + 1) +')');
                var cid = el.getAttribute('data-id');
                init[1] = [cid, el.textContent];
                var csub = obRegion.retSubDataById(cid);
                var sel = document.querySelector(jThd);
                if(csub){
                    sel.innerHTML = obRegion.createOptions(cfg[1], csub);
                    sel.style.display = 'block';
                    eleThd.reFresh();
                    var aarr = obRegion.retFirst(csub);
                    init[2] = [aarr[0], aarr[1]];
                }else{
                    sel.style.display = 'none';
                    init[2] = ['', ''];
                }
            }
        });

        // 县级 滑动
        eleThd = new zTransform(jThd, { spacing : cfg[0], step : cfg[1], then : obRegion.retIndex(init[2][0]),
            complete : function(i){
                var el = document.querySelector(jThd + ' > li:nth-child('+ (i + 1) +')');
                init[2] = [el.getAttribute('data-id'), el.textContent];
            }
        });
    }

    // [函数] 确定地区关闭弹窗
    function closeRegion(event){

        // 关闭 遮罩 & 选择的弹窗
        GI('J_sltCity').style.cssText = obRegion.kernel() + 'transition:all .15s linear;'+ obRegion.kernel() +'transform:translateY(0px);';
        GI('J_mask').style.display = 'none';

        // 注: 解锁DOM滚动条
        eleFst.removeDocLit();
        eleScd.removeDocLit();
        eleThd.removeDocLit();

        // 组合值
        var _txt = [], _val = [];
        for(var i in init){
            var rs = init[i];
            if(rs[0] != '' && rs[1] != ''){
                _txt.push(rs[1]);
                _val.push(rs[0]);
            }
        }

        // 赋值
        GI('J_forCity').innerHTML = _txt.join(' / ');
        GC('#J_valCity').value = _val.join('|') + ',' + _txt.join('|');

        // 防止穿透
        event.preventDefault();
    }

    /* ----------------------------- */

    $(function(){

        //
        var sltBtn = $('#J_sltBtn'), zon = 'z-on';
        sltBtn.on('tap', 'a', function(){

            var _that = $(this), _parent = _that.parent();

            if(_that.hasClass(zon)) return !1;

            _that.addClass(zon).siblings('a').removeClass(zon);
        });

    });

    function submit()
    {
        var name = $('#name').val();
        var district = $('#J_valCity').val();
        var address = $('#address').val();
        var mobile = $('#mobile').val();
        var shop_id = $('#shop_info').attr("shop_id");

        if (name == "") {
            alert("请填写您的姓名~");
            return;
        }
        if (mobile == "") {
            alert("请填写您的电话~");
            return;
        }
        if (address == "") {
            alert("请填写您的地址~");
            return;
        }
        if (shop_id == 0) {
            alert("请请选择退货方式及门店~");
            return;
        }

        var arr = [];
        arr = district.split("|");
        arr = arr[2].split(",");
        var express = {};
        var params = {};
        express.district = 0 + arr[0];
        if (express.district == "") {
            alert("请选择您所在区域~");
            return;
        }
        express.name = name;
        express.mobile = mobile;
        express.address = address;
        params.express = express;
        params.shop_id = shop_id;
        $.post("", params, function(data) {
            if(data == 1) {
                window.location.href = '<?=\yii\helpers\Url::to(['returngoods/refund_list','page' => 0,'per-page' => 5])?>';
            }else {
                alert(data);
            }
        })
    }
</script>
</body>




